<template>
  <div id="header">
    <div class="header-search">
      <div class="logo"></div>
      <div class="search-form">
        <input
          v-model="keyword"
          type="text"
          placeholder="歌手/歌名"
          @input="input"
          @keyup.enter="search(keyword)"
        />
        <div v-if="keyword.trim() !== ''" class="search-list">
          <ul v-if="resultCount > 0">
            <li
              v-for="(data, index) in resultList"
              :key="index"
              @click="search(data.HintInfo)"
            >
              {{ data.HintInfo }}
            </li>
          </ul>
          <p v-else>{{ searchTip }}</p>
        </div>
      </div>
      <div class="search" @click="search(keyword)"></div>
    </div>
    <div v-if="$route.path !== '/search'" class="header-tab">
      <ul>
        <li v-for="(tab, index) of tabs" :key="index">
          <router-link :to="tab.path">{{ tab.name }}</router-link>
        </li>
      </ul>
    </div>
    <div v-else class="header-search-result">
      <div class="goback" @click="$router.go(-1)"></div>
      <div class="searchCount">
        共有 <em>{{ searchCount }}</em
        >条结果
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import { ITab } from '@src/types/header';

  @Component
  export default class AppHeader extends Vue {
    keyword: string = ''; // 搜索的关键字
    resultCount: number = 0; // 得到的结果数量
    resultList: any[] = []; // 搜索得到的结果列表
    searchTip: string = '正在搜索...'; // 搜索时的提示信息
    tabs: ITab[] = [
      {
        path: 'new',
        name: '新歌',
      },
      {
        path: 'recommend',
        name: '推荐',
      },
      {
        path: 'local',
        name: '本地',
      },
    ];

    get searchCount() {
      return this.$$store.state.searchCount;
    }

    // 点击搜索事件, keyword为关键字
    search(keyword: string) {
      if (!keyword || keyword.trim() === '') {
        this.$MessageBox.alert('请输入搜索内容');
        return;
      }
      this.$router.push('/search?keyword=' + keyword);
      this.keyword = '';
    }

    // 搜索框input事件, keyword为关键字
    input() {
      const keyword = this.keyword;
      if (!keyword || keyword.trim() === '') {
        return;
      }

      this.resultCount = 0;
      this.searchTip = '正在搜索...';
      this.api
        .search(keyword)
        .then(res => {
          console.log('>>> [res] 根据关键字搜索', res);
          if (res.status === 200 && res.statusText === 'OK') {
            this.resultList = res.data.data[0].RecordDatas;
            this.resultCount = res.data.data[0].RecordCount;
            if (this.resultList.length <= 0) {
              this.resultCount = 0;
              this.searchTip = '暂无结果...';
            }
          } else {
            this.searchTip = '搜索出错, 请稍后重试';
          }
        })
        .catch(err => {
          this.resultCount = 0;
          this.searchTip = '网络出现错误或服务不可用';
          console.log('>>> [err] 根据关键字搜索', err);
        });
    }
  }
</script>

<style lang="less">
  @import (reference) '../less/mixin.less';

  #header {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: #fff;
    .header-search {
      display: flex;
      align-items: center;
      height: 1.25rem;
      padding: 0 0.2778rem;
      background-color: #2ca2f9;
      .logo {
        width: 2.8333rem;
        height: 0.6528rem;
        .bgImg('logo');
        .bgImgContain;
      }
      .search-form {
        flex: 1;
        height: 0.7778rem;
        margin: 0.2361rem 0.2778rem;
        border: 1px solid #fff;
        border-radius: 4px;
        position: relative;
        input {
          vertical-align: top;
          height: 100%;
          color: #fff;
          &::-webkit-input-placeholder {
            color: #fff;
          }
        }
        .search-list {
          position: absolute;
          left: 0;
          top: 0.75rem;
          width: 100%;
          border: 1px solid #2ca2f9;
          border-radius: 4px;
          background-color: #fff;
          z-index: 10;
          li,
          p {
            padding: 0.2778rem;
            .fontSize(28);
          }
        }
      }
      .search {
        width: 0.4722rem;
        height: 0.4722rem;
        .bgImgContain;
        .bgImg('search');
      }
    }
    .header-tab {
      ul {
        display: flex;
        padding: 0 0.2778rem;
        li {
          flex: 1;
          line-height: 1.3889rem;
          text-align: center;
          .fontSize(32);
          a {
            display: block;
            &.active {
              border-bottom: 2px solid #33a3f5;
              color: #33a3f5;
            }
          }
        }
      }
    }
    .header-search-result {
      position: relative;
      background-color: #dedede;
      .goback {
        top: 50%;
        left: 0.1389rem;
        width: 0.5556rem;
        height: 0.5556rem;
        position: absolute;
        transform: translate3d(0, -50%, 0);
        .bgImgContain;
        .bgImg('icon-goback');
      }
      .searchCount {
        color: #5d5d5d;
        line-height: 0.8889rem;
        padding-left: 0.8333rem;
        em {
          color: #2ca2f9;
          margin: 0 0.1389rem;
        }
      }
    }
  }
</style>
